import { React, useEffect, useRef, useState } from 'react'
import * as echarts from "echarts";
import './index.scss'
import chanpan from "../../../assents/001.png"
// import { LuckyWheel } from "@lucky-canvas/react"

let vertion = 0;
let interval = '';

export default function Index() {
  const chartRef = useRef(null);
  const ref = useRef();
  // 获取本地存储内容
  const wind = JSON.parse(localStorage.getItem('settings')) || {};
  console.log(wind, '123');
  const [menu, setMenu] = useState(wind.zoomMode);
  //修改颜色
  const [styles, setstyles] = useState(wind.colorData);
  const [colors, setcolors] = useState(wind.colors);

  //添加数据
  let [month, setmonth] = useState(1)
  let [day, setday] = useState(1)
  //设置默认值
  function changeText(e, type) {
    let val = e.target.value;
    if (val > 12 && type == 'm' || val > 30 && type == 'd') {
        return
    }
    if (type == 'm') {
      setmonth(month = val)
    } else {
      setday(day = val)
    }
}
//点击
function rotate() {
  let endtime = 30;
  let dom = ref.current;
  let Time = 0;
  let flag = true;
  Time = vertion;
  let qwe = 0
  let total = (day * month * 1000);
  if (total > 100000) {
      total /= 200
      if (total < 1000) {
          total+=300
      }
  } else if (total > 15000) {
      total /=20
  }
  interval = setInterval(() => {
      if (Time >= total) {
          flag = false;
      }
      if (flag) {
          Time += 30;
          qwe+=30
          console.log(123,123456);
      } else {
          endtime -= 0.1;
          Time += endtime;
          clearInterval(interval)
      }
      dom.style.transform = `rotate(${qwe}deg)`;
  }, 10);
}

//图表
useEffect(() => {
  getline()

})
function getline(){
  let chartInstance = echarts.init(chartRef.current);
  chartInstance.clear()
  const option = {
    color:styles[colors],
    series: [
      {
          labelLine: {
              show: false,
              avoidLabelOverlap: false,
          },
          name: 'Access From',
          type: 'pie',
          radius: '65%',
          data: [
              {
                  value: 10, name: '子',
                  label: {
                      show: true,
                      position: 'inside',
                  }

              },
              {
                  value: 10, name: '丑',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '寅',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '卯',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '辰',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '巳',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '午',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '未',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '申',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '酉',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '戌',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              {
                  value: 10, name: '亥',
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
          ],
          "label": {
              "normal": {
                  "show": true,
                  "textStyle": {
                      "fontSize": 12
                  }
              },
              "emphasis": {
                  "show": true
              }
          },
      }
  ]
  };
  chartInstance.setOption(option);
  window.addEventListener("resize", function () {
    chartInstance.resize();
  });
}


  return (
    <div className='map'>
      <h3>配偶方位预测(仅供娱乐)</h3>
      <div className="input-group">
        <label>你的生日(农历):
          <input type="number"  style={{ color: 'black' }} min="1" onChange={(e) => { changeText(e, 'm') }} max="12" value={month} /> 月
          <input type="number" onChange={(e) => { changeText(e, 'd') }} style={{ color: 'black' }} min="1" max={30} value={day} /> 日
        </label>
        <button onClick={rotate.bind(this) }>测一测</button>
      </div>
      <div className="chart" >
        <img ref={ref} src={chanpan} className='zhizhenss' alt="" />
        {/* <div id='tuututuut'></div> */}
        <div id='tuututuut' ref={chartRef} style={{ height: '320px', width: '25vw' }}></div>
        <div className="text">
          <p>如果找对象，预测结果可以作为一个参考方向；如果已是夫妻，两人测得结果和实际方位都匹配的自然概率是2.78%，其中只有一方匹配的自然概率是16.67%。</p>
          <p>猜对者请继续保持和谐，猜不对也请继续努力，夫妻相敬如宾，必能幸福长久！</p>
        </div>
      </div>
    </div>
  )
}
